<template>
    <!-- 使用 ref 属性获取外层盒子的 DOM 元素 -->
    <div id="pre-chart" ref="preChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    props: {
        inData: {
            type: Array,
            default: () => {
                return [];
            },
        },
        pieColor: {
            type: Array,
            default: () => {
                return [];
            },
        },
        textData: {
            type: Object,
            default: () => {
                return 1;
            },
        },
        params: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            myChart: null,
            rightInData: this.inData,
            emphasis: {
                itemStyle: {
                    borderWidth: 10,
                    shadowOffsetX: 0,
                    shadowColor: "#000",
                    shadowBlur: 10,
                    shadowOpacity: 1,
                },
            },
        };
    },
    watch: {
        params: {
            handler(newVal, oldVal) {
                console.log("newVal", newVal);
                this.rightInData = newVal.data.children;
                this.initPreChart();
            },
        },
    },
    mounted() {
        this.initPreChart();
        window.addEventListener("resize", this.handleResize);
        this.myChart.on("mouseover", this.handlePieSectorMouseover);
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.handleResize);
    },
    methods: {
        initPreChart() {
            this.myChart = echarts.init(this.$refs.preChart);
            let option = {
                legend: {
                    top: this.inData.length > 6 ? "62%" : "65%", // 设置图例距离底部的距离为 5%
                    padding: [0, 50], // 设置图例的左右内边距为 50px
                    icon: "circle",
                    left: "center",
                    textStyle: {
                        // 设置图例文本样式
                        fontSize: 12,
                    },
                },

                graphic: {
                    elements: [
                        {
                            type: "text",
                            left: "center",
                            top: "22%",
                            style: {
                                text: "dsf",
                            },
                        },
                    ],
                },
                series: [
                    {
                        top: 20,
                        name: "一级故障原因",
                        type: "pie",
                        radius: ["50%", "70%"],
                        z: 999,
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            show: false,
                            label: {
                                show: true,
                                fontSize: "30",
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: this.InData,
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            this.myChart.setOption(option);
            window.addEventListener("resize", this.handleResize);
        },
        handleResize() {
            if (this.myChart) {
                this.myChart.resize;
            }
        },
        handlePieSectorMouseover(params) {
            this.$set(this.emphasis.itemStyle, "shadowColor", params.color);
            const emphasisCopy = JSON.parse(JSON.stringify(this.emphasis));
            this.$nextTick(() => {
                this.myChart.setOption({
                    series: [
                        {
                            type: "pie",
                            emphasis: emphasisCopy,
                        },
                    ],
                });
            });
        },
    },
};
</script>

<style scoped>
.chartContainer-container {
    width: 100%;
    /* // 设置宽度为 100% */
    height: 400px;
    border: 1px solid;
}
</style>
